<template>
  <div class="home">
    <div class="room-list" :class="footTabType == false ? 'new-room-list' : ''">
      <router-view></router-view>
    </div>
    <footer-tabs
      v-show="footTabType"
      class="footer"
      @insertEvent="insertEvent"
    />
  </div>
</template>

<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import FooterTabs from "../../components/footer-tabs";
import { onMounted, watch, ref, inject } from "vue";

export default {
  name: "authenticated-app",
  components: { FooterTabs },
  setup() {
    const socket = inject("socket");
    let router = useRouter();
    onMounted(() => {
      router.push({ path: "/chat" });
    });

    // 监听路由 判断是否展示底部栏
    const footTabType = ref(true);
    const list = ["/chat", "/contacts", "/me"];
    watch(
      () => router.currentRoute.value.path,
      (newValue) => {
        footTabType.value = list.some((el) => el === newValue);
      },
      { immediate: true }
    );
    //底部栏切换
    const insertEvent = (item) => {
      router.push({ path: item.path });
    };
    const store = useStore();
    const { userInfo } = store.getters;
    socket.emit("getHisMeg", {
      roomId: userInfo.id,
      offset: 1,
      limit: 1000,
    });
    // 进入添加联系人界面
    const addContacts = () => {
      router.push({ path: "/addcontacts" });
    };
    return {
      footTabType,
      userInfo,
      insertEvent,
      addContacts,
    };
  },
};
</script>

<style scoped lang="scss">
.home {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  box-shadow: 0 0 0 10px var(--c-gray-300), 0 0 0 11px var(--c-gray-200);
  background-color: #fff;
  @include background_color("background_color1");
  box-sizing: border-box;

  .new-room-list {
    height: calc(100vh - 0.6rem) !important;
  }

  .room-list {
    height: calc(100vh - 1.8rem);
    margin-top: 0.6rem;
    overflow: auto;
    width: 100%;
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
